<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <link rel="stylesheet" href="./7-1myl.css" />
  <script src="./echarts/echarts.js"></script>
</head>
<body>
  <div class="box">
    <div class="box1">
      <div class="box2">
        <p>
          <span>会员累计数据</span> 数据更新于2022-7-01 07:35:12, 每日更新一次
          <img src="./img/微信图片_20220701160203.png" alt="" /> 说明
        </p>
      </div>
      <div class="box3">
        <div class="box4">
          <p class="Image">
            <img src="./img/微信截图_20220701191609.png" alt="" />
          </p>
          <div class="box5">
            <p>累计会员数</p>
            <p class="digit"></p>

          </div>
        </div>
        <div class="box6">
          <p class="Imag">
            <img src="./img/微信截图_20220701191631.png" alt="" />
          </p>
          <div class="box7">
            <p>访问会员数</p>
            <p class="digit"></p>

          </div>
        </div>
        <div class="box8">
          <p class="Imae">
            <img src="./img/微信截图_20220701191657.png" alt="" />
          </p>
          <div class="box9">
            <p>付费会员数</p>
            <p class="digit"></p>

          </div>
        </div>
        <div class="box10">
          <p class="mage">
            <img src="./img/微信截图_20220701191712.png" alt="" />
          </p>
          <div class="box11">
            <p>流失率</p>
            <p class="digit"></p>

          </div>
        </div>
      </div>
    </div>
    <div id="box12"></div>
  </div>
</body>
<script>
  $.ajax({
    url: "http://qqq/log.php",
    type: "get",
    dataType: "json",
    success: function (res) {
      console.log(res);
      $(".digit").eq(0).html(res.member_count);
      $(".digit").eq(1).html(res.member_view_count);
      $(".digit").eq(2).html(res.order_pay_member_count);
      $(".digit").eq(3).html(res.un_view_scale);
    },
  });


var myChart = echarts.init(document.getElementById('box12'));
 prom = {      
    series: [{
                    name: '新增会员数',
                    type: 'line',
                    stack: '总量',
                    data: []
                },
                {
                    name: '新增访客数',
                    type: 'line',
                    stack: '总量',
                    data: []
                },
            ],
            tooltip: {
                trigger: 'axis'
            },
           
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2022-06-01', '2022-06-03', '2022-06-05', '2022-06-07', '2022-06-09', '2022-06-011',
                    '2022-06-13', '2022-06-15', '2022-06-17', '2022-06-19', '2022-06-21', "2022-06-23",
                    '2022-06-25', '2022-06-27', '2022-06-29'
                ],
            },
            legend: {
                data: ['新增会员数', '新增访客数']
            },
            yAxis: {
                type: 'value'
            },
            
        };
        $.ajax({
            url: 'http://qqq/index.php',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                    for(let i in res){
                        console.log(res[i]);
                        if(i=='2022-06-01'){
                            prom.series[0].data[0] = res[i].member_count
                            prom.series[1].data[0] = res[i].member_view_count
                        }else if(i=='2022-06-03'){
                            prom.series[0].data[1] = res[i].member_count
                            prom.series[1].data[1] = res[i].member_view_count
                        }else if(i=='2022-06-05'){
                            prom.series[0].data[2] = res[i].member_count
                            prom.series[1].data[2] = res[i].member_view_count
                        }else if(i=='2022-06-07'){
                            prom.series[0].data[3] = res[i].member_count
                            prom.series[1].data[3] = res[i].member_view_count
                        }else if(i=='2022-06-09'){
                            prom.series[0].data[4] = res[i].member_count
                            prom.series[1].data[4] = res[i].member_view_count
                        }else if(i=='2022-06-11'){
                            prom.series[0].data[5] = res[i].member_count
                            prom.series[1].data[5] = res[i].member_view_count
                        }else if(i=='2022-06-13'){
                            prom.series[0].data[6] = res[i].member_count
                            prom.series[1].data[6] = res[i].member_view_count
                        }else if(i=='2022-06-15'){
                            prom.series[0].data[7] = res[i].member_count
                            prom.series[1].data[7] = res[i].member_view_count
                        }else if(i=='2022-06-17'){
                            prom.series[0].data[8] = res[i].member_count
                            prom.series[1].data[8] = res[i].member_view_count
                        }else if(i=='2022-06-19'){
                            prom.series[0].data[9] = res[i].member_count
                            prom.series[1].data[9] = res[i].member_view_count
                        }else if(i=='2022-06-21'){
                            prom.series[0].data[10] = res[i].member_count
                            prom.series[1].data[10] = res[i].member_view_count
                        }else if(i=='2022-06-23'){
                            prom.series[0].data[11] = res[i].member_count
                            prom.series[1].data[11] = res[i].member_view_count
                        }else if(i=='2022-06-25'){
                            prom.series[0].data[12] = res[i].member_count
                            prom.series[1].data[12] = res[i].member_view_count
                        }else if(i=='2022-06-27'){
                            prom.series[0].data[13] = res[i].member_count
                            prom.series[1].data[13] = res[i].member_view_count
                        }else if(i=='2022-06-29'){
                            prom.series[0].data[14] = res[i].member_count
                            prom.series[1].data[14] = res[i].member_view_count
                        }
                    }
                    myChart.setOption(prom);
 
            }
        })
myChart.setOption(prom);
</script>

</html>